<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8"/>
        <title>Vocabulary Game</title>
        <link rel="stylesheet" type="text/css" href="css/voccro.css"/>
    </head>
    <body>
        <div class="content">
            <button id="importState">Import</button>
            <button id="exportState">Export</button>
            <button id="deleteState">Delete</button>
            <button id="dehr">From German to Croatian</button>
            <button id="hrde">From Croatian to German</button>
            <button id="playPerfectlyKnownWordsGame">Perfectly known words only</button>
            <div id="wordToGuess"></div>
            <div id="multipleChoiceWithArticles">
                <table class="wordsWithArticlesGrid">
                    <tr>
                        <td><button class="articles">der</button></td>
                        <td><button class="articles">die</button></td>
                        <td><button class="articles">das</button></td>
                        <td><span id="wordWithoutArticle1"></span></td>
                    </tr>
                    <tr>
                        <td><button class="articles">der</button></td>
                        <td><button class="articles">die</button></td>
                        <td><button class="articles">das</button></td>
                        <td><span id="wordWithoutArticle2"></span></td>
                    </tr>
                    <tr>
                        <td><button class="articles">der</button></td>
                        <td><button class="articles">die</button></td>
                        <td><button class="articles">das</button></td>
                        <td><span id="wordWithoutArticle3"></span></td>
                    </tr>
                    <tr>
                        <td><button class="articles">der</button></td>
                        <td><button class="articles">die</button></td>
                        <td><button class="articles">das</button></td>
                        <td><span id="wordWithoutArticle4"></span></td>
                    </tr>
                </table>
            </div>
            <div id="multipleChoice">
                <div id="option1" class="options"></div>
                <div id="option2" class="options"></div>
                <div id="option3" class="options"></div>
                <div id="option4" class="options"></div>
            </div>
            <div id="singleInput">
                <input id="guessedInput" type="text"/>
                <div id="inputHelpDE">
                    <input type="button" class="inputHelp" value="č"/>
                    <input type="button" class="inputHelp" value="ć"/>
                    <input type="button" class="inputHelp" value="đ"/>
                    <input type="button" class="inputHelp" value="š"/>
                    <input type="button" class="inputHelp" value="ž"/>
                </div>
                <div id="inputHelpHR">
                    <input type="button" class="inputHelp" value="Ä"/>
                    <input type="button" class="inputHelp" value="ä"/>
                    <input type="button" class="inputHelp" value="Ö"/>
                    <input type="button" class="inputHelp" value="ö"/>
                    <input type="button" class="inputHelp" value="Ü"/>
                    <input type="button" class="inputHelp" value="ü"/>
                    <input type="button" class="inputHelp" value="ß"/>
                </div>
            </div>
            <div id="result"></div>
            <div id="hint"></div>
            <div id="statusText"></div>
            <div id="exportPanel">
                <input id="exportField" type="text"/>
                <button id="exportClose">x</button>
            </div>
            <div id="importPanel">
                <input id="importField" type="text"/>
                <button id="importStart">Go</button>
            </div>
        </div>
        <div id="infoPanel">
            <ul>
                <li>Session: <span id="infoSessionValue"></span></li>
                <li>Progress: <span id="infoProgressValue"></span></li>
                <li>Number of unknown words: <span id="infoUnknownValue"></span></li>
                <li>Number of known words: <span id="infoKnownValue"></span></li>
                <li>Number of well-known words: <span id="infoWellKnownValue"></span></li>
                <li>Number of perfectly known words: <span id="infoPerfectlyKnownValue"></span></li>
            </ul>
        </div>
        <div id="popup"></div>
        <div id="overlay"></div>

        <script type="text/javascript" src="js/jquery-1.10.2.min.js" charset="utf-8"></script>
        <script type="text/JavaScript" src="js/dictionary.js" charset="utf-8"></script>
        <script type="text/JavaScript" src="js/voccro.js" charset="utf-8"></script>
    </body>
</html>
